<!-- 搜 法官、律师、律所、案例、法院 共同的页面 -->
<template>
	<view>
		<!-- 顶部的搜索框 -->
		<key-word-search :placeholder="searchPlaceholder" @change="searchChange"></key-word-search>
		<!-- 高级搜索 -->
		<view class="big-search-box"><text class="big-text">高级搜索</text></view>
		<!-- 有多少个律师、律所等的提示信息 -->
		<view class="big-search-box" style="background-color: #F5F5F5;">
			共搜索到
			<text class="big-text">{{totalData}}</text>
			个{{ tipWord }},数据持续更新
		</view>
		<!-- 传递的 id 为 '1' 则表示为搜法官-->
		<block v-if="id === '1'">
			<view class="search-item" v-for="seachItem in searchDataList" :key="seachItem.id" @click="searchItmeClick(seachItem.id)">
				<!-- 名称 -->
				<view class="name-box">
					<text class="name">{{ seachItem.user_name }}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<!-- 所属区域及案例 -->
				<view class="name-box">
					<text>{{ seachItem.user_court }}</text>
					<text>（案例 {{ seachItem.case }} 条）</text>
				</view>
			</view>
		</block>
		<!-- 传递的 id 为 '2' 则表示为搜律师 -->
		<block v-else-if="id === '2'">
			<view class="search-item" v-for="lawyer in lawyerDataList" :key="lawyer.id" @click="searchItmeClick(lawyer.id)">
				<view class="name-box">
					<text class="name">{{ lawyer.user_name }}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<!-- 所属区域及案例 -->
				<view class="name-box">
					<text>
						共搜索
						<text style="color: #00C9B1;">{{ lawyer.lawyer_total }}</text>
						个律师，数据持续更新
					</text>
					<text>（案例 {{ lawyer.case }} 条）</text>
				</view>
			</view>
		</block>
		<!-- 传递的 id 为 '3' 则表示为搜律所 -->
		<block class="" v-else-if="id === '3'">
			<view class="search-item" v-for="lawFirm in LawFirmDataList" :key="lawFirm.id" @click="searchItmeClick(lawFirm.id)">
				<view class="name-box">
					<text class="name">{{ lawFirm.law_name }}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<!-- 所属区域及案例 -->
				<view class="name-box">
					<text>律师 {{ lawFirm.law_number }} 个，案例 {{ lawFirm.case }} 条</text>
					<text>（案例 {{ lawFirm.case }} 条）</text>
				</view>
			</view>
		</block>
		<!-- 传递的 id 为 '4' 则表示为搜案例 -->
		<block class="" v-else-if="id === '4'">
			<view class="search-item case-box" v-for="caseItem in caseDataList" :key="caseItem.id" @click="searchItmeClick(caseItem.id)">
				<view class="title-box u-line-2">{{ caseItem.title }}</view>
				<view class="law-firm-box">
					<text>{{ caseItem.trial_court }} | {{ caseItem.case_number }}</text>
				</view>
			</view>
		</block>
		<!-- 传递的 id 为 '5' 则表示为搜法院 -->
		<block class="" v-else-if="id === '5'">
			<view class="search-item court-box" v-for="court in courtDataList" :key="court.id" @click="searchItmeClick(court.id)">
				<view class="court-lfet-box">
					<text class="court-name">{{ court.court_name }}</text>
					<view class="court-case">
						<text>法官 {{ court.law_number }} 个</text>
						<text class="cese">案例 {{ court.cese }} 个</text>
					</view>
				</view>
				<u-icon class="court-icon" name="arrow-right"></u-icon>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {		// 获取数据时需要的参数，这里仅包含了获取案例时的情况
				page: 1,
				page_size: 999,
				title: '',		// 搜索关键字
			},
			// 根据此 id 值动态渲染内容项(注：它是 String 类型的)
			id: '',		// 此值对应这 1 法官、2 律师、3 律所、4 案例、5 法院
			totalData: 0,	// 共搜到多少条该数据
			// 动态传递搜索框中的关键字，如律师、法院等
			searchPlaceholder: '',
			// 提示框中的关键字，如律师、法院等
			tipWord: '',
			// 模拟的搜 法官 场景的数据列表
			searchDataList: [
				{
					id: 1,
					user_name: '冯静',
					user_court: '昆明铁路运输中级法院',
					case: 5
				},
				{
					id: 2,
					user_name: '陈岛民',
					user_court: '昆明铁路运输中级法院',
					case: 6
				},
				{
					id: 3,
					user_name: '吴明奇',
					user_court: '昆明铁路运输中级法院',
					case: 3
				},
				{
					id: 4,
					user_name: '张伟',
					user_court: '昆明铁路运输中级法院',
					case: 1
				}
			],
			// 模拟的搜 律师 场景的数据列表
			lawyerDataList: [
				{
					id: 1,
					user_name: '李三思',
					lawyer_total: 10514,
					case: 5
				},
				{
					id: 2,
					user_name: '陈岛民',
					lawyer_total: 10514,
					case: 6
				},
				{
					id: 3,
					user_name: '吴明奇',
					lawyer_total: 10514,
					case: 3
				},
				{
					id: 4,
					user_name: '张伟',
					lawyer_total: 10514,
					case: 1
				}
			],
			// 模拟的搜 律所 场景的数据列表
			LawFirmDataList: [
				{
					id: 1,
					law_name: '碧玉律师事务所',
					law_number: 1,
					case: 5
				},
				{
					id: 2,
					law_name: '碧玉律师事务所',
					law_number: 1,
					case: 6
				},
				{
					id: 3,
					law_name: '碧玉律师事务所',
					law_number: 1,
					case: 3
				},
				{
					id: 4,
					law_name: '碧玉律师事务所',
					law_number: 1,
					case: 1
				}
			],
			// 搜 案例 场景的数据列表
			caseDataList: [],
			// 模拟的搜 法院 场景的数据列表
			courtDataList: [
				{
					id: 1,
					court_name: '昆明铁路运输中级法院',
					law_number: 12,
					cese: 9
				},
				{
					id: 2,
					court_name: '昆明铁路运输中级法院',
					law_number: 12,
					cese: 9
				},
				{
					id: 3,
					court_name: '昆明铁路运输中级法院',
					law_number: 12,
					cese: 9
				},
				{
					id: 4,
					court_name: '昆明铁路运输中级法院',
					law_number: 12,
					cese: 9
				}
			],
		};
	},
	onLoad(options) {
		this.id = options.id
		this.getData()
		console.log('当前页面id为'+this.id)
		// 根据用户传递的参数动态设置页面标题
		uni.setNavigationBarTitle({
			title: options.text
		});
		this.searchPlaceholder = options.text;
		// 将 “搜” 字去掉，拿到后面的两个字
		this.tipWord = this.searchPlaceholder.replace('搜', '').trim();
	},
	methods: {
		async getData() {
			if(this.id == 4) {		// 获取搜案例的数据
				const res = await this.$u.api.SearchGetCaseList();
				if(!res) return
				this.totalData = res.count
				this.caseDataList = [...this.caseDataList, ...res.data]
				console.log(this.caseDataList)
			}
			
		},
		// 清空页面数据列表（常用于需要重新获取数据前）
		nullDataList() {
			// this.id 	此值对应这 1 法官、2 律师、3 律所、4 案例、5 法院
			switch(parseInt(this.id)) {
				case 1:
					this.searchDataList = []
					break;
				case 2:
					this.lawyerDataList = []
					break;
				case 3:
					this.lawyerDataList = []
					break;
				case 4:
					this.caseDataList = []
					break;
				case 5:
					this.courtDataList = []
					break;
			}
		},
		// 搜索框的输入事件
		searchChange(keyWord) {
			this.sortData.title = keyWord
			this.sortData.page = 1
			this.nullDataList()
			this.getData()
		},
		// 监听页面每一个数据项的点击事件
		searchItmeClick(id) {
			switch (this.id) {
				case '1':	// 1 是 搜法官,则跳转到律师详情页
				this.$u.route({
					url: '/myPackageA/pages/views/search-item-detail',
					params: {
						title: this.tipWord,
						id: id
					}
				})
				break;
				case '2':	// 2 是 搜律师，则跳转到律师详情页
				this.$u.route({
					url: '/myPackageA/pages/views/search-item-detail',
					params: {
						title: this.tipWord,
						id: id
					}
				})
				break;
				case '3':	// 3 是 搜律所，则跳转到律所详情页(律所详情和法院详情共用一页)
				this.$u.route({
					url: '/myPackageA/pages/views/lawyer-firm-detail',
					params: {
						title: this.tipWord,
						id: id
					}
				})
				break;
				case '4':	// 4 是 搜案例，则跳转到案例详情页
				this.$u.route({
					url: '/myPackageA/pages/views/case-detail',
					params: {
						title: this.tipWord,
						id: id
					}
				})
				break;
				case '5':	// 5 是 搜法院，则跳转到法院详情页(律所详情和法院详情共用一页)
				this.$u.route({
					url: '/myPackageA/pages/views/lawyer-firm-detail',
					params: {
						title: this.tipWord,
						id: id
					}
				})
				break;
				default: {		// 预料之外的异常情况则导航到首页
					this.$u.toast('抱歉出错了，即将为您导航到首页')
					setTimeout(() => {
						this.$u.route({
							type: 'switchTab',
							url: 'pages/index/index'
						})
					}, 2000)
				}
			}
			
		},
		
	}
};
</script>

<style lang="scss" scoped>
.big-search-box {
	line-height: 82rpx;
	text-align: center;
	color: #999999;
	.big-text {
		font-size: 28rpx;
		color: $u-text-color;
	}
}
.search-item {
	width: 100%;
	height: 142rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 26rpx 26rpx;
	box-shadow: 0px 1px 0px 0px #e7eaf0;
	.name-box {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #999999;
		.name {
			font-size: 30rpx;
			color: #141418;
		}
	}
}
.case-box {
	height: 200rpx;
	font-weight: 500;
}
.title-box {
	font-size: 30rpx;
	color: #141418;
}
.law-firm-box {
	// display: flex;
	font-size: 26rpx;
	color: #999999;
}
.court-box {
	position: relative;
}
.court-lfet-box {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 30rpx;
	color: #141418;
	font-weight: 500;
	.court-case {
		font-size: 26rpx;
		color: #999999;
		.cese {
			margin-left: 2em;
		}
	}
}
.court-icon {
	position: absolute;
	top: 50%;
	right: 20rpx;
	transform: rotateY(-50%);
	color: #999999;
}
</style>
